<template>
  <div>
    <div id="Echarts">
      <v-chart class="chart" :option="glObj()" />
    </div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart, LineChart, BarChart} from 'echarts/charts';
import {
  GridComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  LegendComponent,
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import { ref, provide, toRaw } from 'vue';

echarts.use([
  CanvasRenderer,
  PieChart,
  LineChart,
  BarChart,
  TitleComponent,
  GridComponent,
  TooltipComponent,
  ToolboxComponent,
  LegendComponent,
]);
const props = defineProps(["options","wh"])
console.log("========",toRaw(props.options))
provide(THEME_KEY, 'dark');
const glObj = () =>{
  return toRaw(props.options)
}
const glWH = () =>{
  return toRaw(props.wh)
}
</script>
<style scoped lang='scss'>
.chart {
  height: 30vh;
}
</style>
